<template>
  <div>
    <h3>{{ name }}歌曲列表--id---{{ id }}</h3>
  </div>
</template>

<script>
export default {
  name: "MusicItem",
  data() {
    return {
      name: "",
      id: "",
    };
  },
  //如果直接在mounted中获取query参数,mounted只能在初始化的时候执行
  //动态路由改变加载的是同一个组件,只不过是参数的改变,组件并不会重新加载,并不会重新执行mounted
  //所以无法在mounted中实时获取最新的query数据
  /* mounted() {
    console.log(this);
    const { name, id } = this.$route.query;
    this.name = name;
    this.id = id;
  }, */

  //我们只有监听$route的query的改变,才可以每次得到最新的值
  //监听有两种方式---1. watch   2.computed
  watch: {
    //每次动态路由参数切换的时候,其实是更换了$route对象,所以我们不需要深度监听
    $route(value) {
      const { name, id } = value.query;
      console.log(value);
      this.name = name;
      this.id = id;
    },
  },
};
</script>

<style></style>
